layui.use(function() {
	var layer = layui.layer,
		$ = layui.jquery,
		element = layui.element,
		util = layui.util;
	const ndjyfy_data = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
	const ndjyfy_data_y = [
		{
			total: 1000,
			child:[
				{
					label:'工资费用',
					fee: 250,
					rate: 250/1000,
				},{
					label:'办公费用',
					fee: 500,
					rate: 500/1000,
				},
				{
					label:'咨询费用',
					fee: 250,
					rate: 250/1000,
				}
			]
		},
		{
			total: 1000,
			child:[
				{
					label:'工资费用',
					fee: 700,
					rate: 700/1000,
				},{
					label:'办公费用',
					fee: 200,
					rate: 200/1000,
				},
				{
					label:'咨询费用',
					fee: 100,
					rate: 100/1000,
				}
			]
		},
		{
			total: 1000,
			child:[
				{
					label:'工资费用',
					fee: 250,
					rate: 250/1000,
				},{
					label:'办公费用',
					fee: 500,
					rate: 500/1000,
				},
				{
					label:'咨询费用',
					fee: 250,
					rate: 250/1000,
				}
			]
		},
		{
			total: 1000,
			child:[
				{
					label:'工资费用',
					fee: 250,
					rate: 250/1000,
				},{
					label:'办公费用',
					fee: 500,
					rate: 500/1000,
				},
				{
					label:'咨询费用',
					fee: 250,
					rate: 250/1000,
				}
			]
		},
		{
			total: 1000,
			child:[
				{
					label:'工资费用',
					fee: 250,
					rate: 250/1000,
				},{
					label:'办公费用',
					fee: 500,
					rate: 500/1000,
				},
				{
					label:'咨询费用',
					fee: 250,
					rate: 250/1000,
				}
			]
		},
		{
			total: 1000,
			child:[
				{
					label:'工资费用',
					fee: 250,
					rate: 250/1000,
				},{
					label:'办公费用',
					fee: 500,
					rate: 500/1000,
				},
				{
					label:'咨询费用',
					fee: 250,
					rate: 250/1000,
				}
			]
		},
		{
			total: 1000,
			child:[
				{
					label:'工资费用',
					fee: 250,
					rate: 250/1000,
				},{
					label:'办公费用',
					fee: 500,
					rate: 500/1000,
				},
				{
					label:'咨询费用',
					fee: 250,
					rate: 250/1000,
				}
			]
		},
		{
			total: 1000,
			child:[
				{
					label:'工资费用',
					fee: 250,
					rate: 250/1000,
				},{
					label:'办公费用',
					fee: 500,
					rate: 500/1000,
				},
				{
					label:'咨询费用',
					fee: 250,
					rate: 250/1000,
				}
			]
		},
		{
			total: 1000,
			child:[
				{
					label:'工资费用',
					fee: 250,
					rate: 250/1000,
				},{
					label:'办公费用',
					fee: 500,
					rate: 500/1000,
				},
				{
					label:'咨询费用',
					fee: 250,
					rate: 250/1000,
				}
			]
		},
		{
			total: 1000,
			child:[
				{
					label:'工资费用',
					fee: 250,
					rate: 250/1000,
				},{
					label:'办公费用',
					fee: 500,
					rate: 500/1000,
				},
				{
					label:'咨询费用',
					fee: 250,
					rate: 250/1000,
				}
			]
		},
		{
			total: 1000,
			child:[
				{
					label:'工资费用',
					fee: 250,
					rate: 250/1000,
				},{
					label:'办公费用',
					fee: 500,
					rate: 500/1000,
				},
				{
					label:'咨询费用',
					fee: 250,
					rate: 250/1000,
				}
			]
		},
		{
			total: 1000,
			child:[
				{
					label:'工资费用',
					fee: 250,
					rate: 250/1000,
				},{
					label:'办公费用',
					fee: 500,
					rate: 500/1000,
				},
				{
					label:'咨询费用',
					fee: 250,
					rate: 250/1000,
				}
			]
		}
	]

	var ndjyfy_html = '';
	ndjyfy_data.forEach((xData,index)=>{
		const yData = ndjyfy_data_y[index];
		if(index % 2 === 0){
			ndjyfy_html = ndjyfy_html + `
				<div class="layui-col-xs1 yz-common-line">
					<div class="layui-col-xs12 yz-common-line-draw-bottom"><div class="dot">.</div></div>
					<div class="layui-col-xs12">
						<div class="yz-common-line-content-b">
							<div class="yz-common-line-content-month" lay-on="yz-tips" data-index="${index}"><span>${xData}</span></div>
							<div class="yz-common-line-content-fee">${yData.total}</div>
							<div class="yz-common-line-content-label">经营费用</div>
						</div>
					</div>
				</div>
			`;
		}else{
			ndjyfy_html = ndjyfy_html + `
				<div class="layui-col-xs1 yz-common-line">
					<div class="layui-col-xs12">
						<div class="yz-common-line-content-t">
							<div class="yz-common-line-content-label">经营费用</div>
							<div class="yz-common-line-content-fee">${yData.total}</div>
							<div class="yz-common-line-content-month" lay-on="yz-tips" data-index="${index}"><span>${xData}</span></div>
						</div>
					</div>
					<div class="layui-col-xs12 yz-common-line-draw-top"><div class="dot">.</div></div>
				</div>
			`;
		}
	})
	$('#ndjyfy').html('<div class="yz-line">' + ndjyfy_html + '</div>');
	
	util.on('lay-on', {
		'yz-tips': function(e){
			var curd = ndjyfy_data_y[e.context.dataset.index];
			var childs = curd.child;
			var tipHtml = '';
			childs.forEach(a=>{
				 tipHtml = tipHtml + `
					<div class="yz-ftable">
						<div class="square"></div>
						<div class="label">${a.label}</div>
						<div class="fee">${a.fee}</div>
						<div class="process">
							 <div class="layui-progress" lay-filter="filter-progress">
							    <div class="layui-progress-bar" lay-percent="${a.rate*100}%"></div>
							  </div>
						</div>
						<div class="rate">${a.rate*100}%</div>
					</div>
				`;
			});
			
	      
		  layer.tips(tipHtml, this, {
			  tips: [2, '#34BAC6'],
			  time: 100000
		   });
		   element.render('progress', 'filter-progress');
		},
	});
	
});